<template>
  <div class="image_cell">
    <el-image class="el_image" :src="info.url" :preview-src-list="[info.url]">
    </el-image>
    <div class="icon_list">
      <i class="el-icon-zoom-in" @click="previewImage(info.url)"></i>
      <i class="el-icon-delete" v-if="!disabled" @click="removeImage(info)"></i>
    </div>
    <div class="blk"></div>
  </div>
</template>
<script>
import { api as viewerApi } from "v-viewer";
import "viewerjs/dist/viewer.css";
// import { BASEURL, COMMONFILEUPLOAD } from "@/http/system";
export default {
  name: "CropperImage",
  props: {
    info:{
        type:Object,
        default:function(){
          return {}
        }
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
      default: "", // small  large
    },
  },
  data() {
    return {};
  },
  methods: {
    // 删除事件
    removeImage(row) {
      this.$emit("delete", row);
    },

    // 图片预览
    previewImage(url) {
      let imageList = [url];
      viewerApi({
        images: imageList,
        options: {
          zIndex: 99999,
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.image_cell {
  position: relative;
  width: 148px;
  height: 148px;
  border: 1px dashed #d8d8d8;
  border-radius: 4px;
  padding: 2px;
  box-sizing: border-box;
  margin: 0 10px 10px 0;

  .icon_list {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    z-index: 3;

    i {
      font-size: 24px;
      color: #fff;
      margin: 0 10px;
      cursor: pointer;
    }
  }

  .el_image {
    width: 100%;
    height: 100%;
    border-radius: 4px;
  }

  .blk {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: #000;
    opacity: 0.4;
    z-index: 2;
  }
}

.image_cell:hover {
  .icon_list {
    display: block;
  }

  .blk {
    display: block;
  }
}
</style>